<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 标题 -->
        <tree-tools :tree-note="company" is-root />
        <!-- 树形结构内容 -->
        <el-tree
          :data="departs"
          :props="defaultProps"
          default-expand-all
        >
          <tree-tools
            slot-scope="{data}"
            :tree-note="data"
            @EditDepts="EditDept"
            @delDept="getDeptment"
            @addDepts="addDepts"
          />
        </el-tree>

      </el-card>

    </div>
    <!-- 对话框 -->
    <addTools
      ref="addDpt"
      :tree-note="node"
      :visible.sync="isShow"
    />
  </div>
</template>

<script>
import { getDeptmentList } from '@/api/department'
import treeTools from './compents/tree-tools.vue'
import { tranListToTreeData } from '@/utils/index'
import addTools from './compents/add-tools'

export default {

  components: { treeTools, addTools },
  data() {
    return {
      company: { },
      departs: [],
      defaultProps: {
        label: 'name'
      },
      isShow: false,
      node: {}
    }
  },
  created() {
    this.getDeptment()
  },
  methods: {
    // 获取部门列表
    async getDeptment() {
      const data = await getDeptmentList()
      console.log(data)
      const { depts, companyName } = data
      this.company = { name: companyName, manager: '负责人', id: '' }
      this.departs = tranListToTreeData(depts, '')
    },
    // 增加
    addDepts(node) {
      this.isShow = true
      this.node = node
      console.log(this.node)
    },
    // 编辑 回显
    EditDept(node) {
      this.isShow = true
      this.node = node
      console.log(this.node)
      this.$refs.addDpt.getDeptmentListDail(node)
    }
  }

}
</script>

<style lang='scss'  scoped >
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
 .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
